Angular একটি জনপ্রিয় JavaScript framework যা web applications তৈরি করার জন্য ব্যবহৃত হয়। এটি TypeScript ব্যবহার করে এবং MVC (Model-View-Controller) অথবা MVVM (Model-View-ViewModel) আর্কিটেকচারে কাজ করে। Angular অ্যাপ্লিকেশন গঠন করতে তিনটি প্রধান কনসেপ্ট রয়েছে: Modules, Components, এবং Services।
১. Modules
Angular অ্যাপ্লিকেশন একটি Module দিয়ে শুরু হয় এবং সবকিছু একটি নির্দিষ্ট মডিউলেই থাকে। মডিউল হলো অ্যাপ্লিকেশনের একক ইউনিট, যেখানে অ্যাপ্লিকেশনের সব কনফিগারেশন, কম্পোনেন্ট, সার্ভিস, পাইপ ইত্যাদি ম্যানেজ করা হয়।
Module এর কনসেপ্ট
- @NgModule: এটি একটি ডেকোরেটর, যা Angular মডিউলকে সনাক্ত করে এবং মডিউলের কনফিগারেশন প্রদান করে। একটি মডিউল অ্যাপ্লিকেশনের কম্পোনেন্ট, ডিরেকটিভ এবং পাইপগুলিকে একটি সংগঠিত ভাবে গ্রুপ করে।
- imports: অন্য মডিউলগুলোকে আমদানি করা হয়।
- declarations: অ্যাপ্লিকেশনের কম্পোনেন্ট, ডিরেকটিভ এবং পাইপ এই স্থানে ডেক্লেয়ার করা হয়।
- providers: সার্ভিস এবং অন্যান্য প্রোভাইডার এখানে দেয়া হয়।
- bootstrap: অ্যাপ্লিকেশনের মূল কম্পোনেন্ট (অথবা রুট কম্পোনেন্ট) এখানে নির্ধারণ করা হয়।
Module Example:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent], // কম্পোনেন্টগুলো ডেক্লেয়ার করা
imports: [BrowserModule], // আমদানি করা মডিউল
providers: [], // সার্ভিস বা অন্যান্য প্রোভাইডার
bootstrap: [AppComponent] // রুট কম্পোনেন্ট
})
export class AppModule { }
এখানে, AppModule হলো অ্যাপ্লিকেশনের মূল মডিউল।
২. Components
Angular অ্যাপ্লিকেশনের সকল UI কম্পোনেন্ট দ্বারা গঠিত হয়। একটি Component হলো একটি ক্লাস যা HTML টেমপ্লেট এবং CSS এর মাধ্যমে ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে।
Component এর কনসেপ্ট
- @Component: এটি একটি ডেকোরেটর যা Angular কম্পোনেন্টকে সনাক্ত করে এবং তার সাথে টেমপ্লেট, স্টাইল এবং কনফিগারেশন সংযুক্ত করে।
- selector: এটি কম্পোনেন্টের নাম, যা HTML টেমপ্লেটে ব্যবহার করা হয়।
- templateUrl: এটি HTML টেমপ্লেটের রেফারেন্স দেয়।
- styleUrls: এটি CSS ফাইলের রেফারেন্স দেয়।
Component Example:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular App';
}
এখানে, AppComponent একটি কম্পোনেন্ট যা app.component.html টেমপ্লেট এবং app.component.css স্টাইল ব্যবহার করে।
৩. Services
Angular এ Services হলো এমন ক্লাস যা নির্দিষ্ট ফাংশনালিটি বা ব্যবসায়িক লজিক প্রদান করে, যেমন ডেটাবেসে ডেটা সংরক্ষণ বা API থেকে ডেটা আনা। সার্ভিসগুলো সাধারণত dependency injection (DI) এর মাধ্যমে কম্পোনেন্টে ইনজেক্ট করা হয়।
Service এর কনসেপ্ট
- @Injectable: সার্ভিস ক্লাসে এই ডেকোরেটর ব্যবহার করা হয়, যা সার্ভিসকে ইনজেক্ট করতে সক্ষম করে।
- providers: মডিউল বা কম্পোনেন্টের মাধ্যমে সার্ভিস প্রোভাইড করা হয়।
Service Example:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root', // সার্ভিসকে রুট লেভেলে প্রোভাইড করা
})
export class DataService {
getData() {
return ['Item 1', 'Item 2', 'Item 3'];
}
}
এখানে, DataService একটি সার্ভিস ক্লাস যা ডেটা প্রদান করে। providedIn: 'root' দিয়ে সার্ভিসটি অ্যাপ্লিকেশনের রুট লেভেলে ইনজেক্ট করা হয়।
Service ব্যবহার:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `<h1>{{ data }}</h1>`
})
export class AppComponent {
data: string[];
constructor(private dataService: DataService) {
this.data = dataService.getData();
}
}
এখানে, DataService কম্পোনেন্টে dependency injection এর মাধ্যমে ইনজেক্ট করা হয়েছে এবং কম্পোনেন্টে getData() ফাংশন ব্যবহার করে ডেটা পাওয়া যাচ্ছে।
সারাংশ
- Modules: Angular অ্যাপ্লিকেশনের কনফিগারেশন, কম্পোনেন্ট এবং অন্যান্য গুরুত্বপূর্ণ অংশগুলির সংকলন। এটি অ্যাপ্লিকেশনকে সংগঠিত রাখে।
- Components: Angular অ্যাপ্লিকেশনের UI অংশ। এটি HTML টেমপ্লেট, CSS স্টাইল এবং TypeScript ক্লাস দ্বারা গঠিত।
- Services: অ্যাপ্লিকেশনের মধ্যে ডেটা এবং লজিক শেয়ার করার জন্য ব্যবহৃত ক্লাস। সার্ভিসগুলো সাধারণত ডেটাবেস বা API কলের মতো কাজ পরিচালনা করে।
Angular অ্যাপ্লিকেশনের জন্য Modules, Components, এবং Services এই তিনটি প্রধান উপাদান একে অপরের সাথে কাজ করে এবং অ্যাপ্লিকেশনকে কার্যকরভাবে গঠন করে।
Read more
